﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link th:href="@{/front-resource/css/style.css}" type="text/css" rel="stylesheet" />
<link th:href="@{/front-resource/css/app.css}" type="text/css" rel="stylesheet" />
<!-- Favicon -->
<!-- Favicon and Touch Icons -->
<link th:href="@{/front-resource/images/favicon.png}" rel="shortcut icon" type="image/png">
<link th:href="@{/front-resource/images/apple-touch-icon.png}" rel="apple-touch-icon">
<link th:href="@{/front-resource/images/apple-touch-icon-72x72.png}" rel="apple-touch-icon" sizes="72x72">
<link th:href="@{/front-resource/images/apple-touch-icon-114x114.png}" rel="apple-touch-icon" sizes="114x114">
<link th:href="@{/front-resource/images/apple-touch-icon-144x144.png}" rel="apple-touch-icon" sizes="144x144">
<title>酒店订单</title>
</head>
<body>
<!-- Start Main Menu Area -->
<div th:replace="/common/frontCommon::header"></div>
<!-- End Main Menu Area -->

<section class="breadcromb-top section_100">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ol class="text-white justify-content-center no-border mb-0">
          <li class="breadcrumb-item"><a href="index.html"></a></li>
        </ol>
        <div class="breadcromb-box">
          <h3>历史订单</h3>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="booking-section bg-dark pt80 pb80 admin-page">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <div class="dashboard-list-box">
                    <div class="list-sort">
                        <div class="sort-left">历史订单</div>
                        <a href="/frontOrders/selectAll" class="btn btn-primary sort-right" style="margin-top: 20px;">我的订单</a>
                    </div>
                    <div class="single-list" th:each="order:${order}">
                        <div class="media booking-list-media">
                            <a th:href="'/frontOrders/selectByOrderId?id='+${order.orderId}">
                                <div class="media-left">

                                    <img th:src="@{${order.hotelName}==null?'/hand-insert-img/hotel-not-found.jpg':'/img/hotel/'+${order.imageName}}" alt="图片未能找到" style="height: 112px;width: 112px;">
                                </div>
                                <div class="media-body">
                                    <div class="booking-list">
                                        <span style="background: gray;color: #ffffff;" class="highlight" th:if="${order.orderStatus}==2">已取消</span>
                                        <span style="color: #ffffff;" class="highlight bg-success" th:if="${order.orderStatus}==3">已完成</span>
                                        <span style="background: gray;color: #ffffff;" class="highlight" th:if="${order.orderStatus}==99">已退款</span>
                                    </div>
                                    <div class="booking-list">酒店名称: <span th:text="${order.orderHotel}"></span></div>
                                    <div class="booking-list">房间类型: <span th:text="${order.orderRoom}"></span></div>
                                    <div class="booking-list ">下单时间: <span class="highlight"  th:text="${#dates.format(order.orderTime,'yyyy-MM-dd HH:mm:ss')}"></span></div>
                                    <div class="booking-list" th:if="${order.orderStatus}==3"> 支付金额: <span class="highlight bg-success"  th:text="${order.orderPrize}+'元'"></span></div>
                                    <a th:href="'/frontOrders/selectByOrderId?id='+${order.orderId}" class="btn btn-primary">查看详情</a>
                                </div>
                            </a>
                            <div class="right-btn">
                                <a th:href="'/hotel/detail?id='+${order.hotelId}" class="btn btn-primary approved">再次预订</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:replace="/common/frontCommon::footer"></div>

<!-- Optional JavaScript --> 
<!-- jQuery first, then Popper.js, then Bootstrap JS --> 
<script th:src="@{/front-resource/js/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/popper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/getfund-nav.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/owl.carousel.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/waypoints.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/jquery.counterup.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/swiper.min.js}" type="text/javascript"></script>
<script th:src="@{/front-resource/js/custom.js}" type="text/javascript"></script>
</body>
</html>